.navbar
  .navbar-inner
    .left.sliding
      a(href="swiper.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding Multiple Sliders
    .right
      a(href="#").open-panel.link.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="swiper-multiple")
    .page-content

      .content-block-title 1 Slide Per View, 50px Between
      .swiper-container.swiper-init.ks-carousel-slider(data-pagination=".swiper-pagination-c1", data-space-between="50")
        .swiper-pagination.swiper-pagination-c1
        .swiper-wrapper
          - for (var i = 1; i < 11; i++)
            .swiper-slide Slide #{i}

      .content-block-title 2 Slides Per View, 20px Between
      .swiper-container.swiper-init.ks-carousel-slider(data-pagination=".swiper-pagination-c2", data-space-between="20", data-slidesPerView="2")
        .swiper-pagination.swiper-pagination-c2
        .swiper-wrapper
          - for (var i = 1; i < 11; i++)
            .swiper-slide Slide #{i}

      .content-block-title 3 Slides Per View, 10px Between
      .swiper-container.swiper-init.ks-carousel-slider(data-pagination=".swiper-pagination-c3", data-space-between="10", data-slides-per-view="3")
        .swiper-pagination.swiper-pagination-c3
        .swiper-wrapper
          - for (var i = 1; i < 11; i++)
            .swiper-slide Slide #{i}
      .content-block-title Auto Slides Per View + Centered
      .swiper-container.swiper-init.ks-carousel-slider.ks-carousel-slider-auto(data-pagination=".swiper-pagination-c4", data-space-between="10", data-slides-per-view="auto", data-centered-slides="true")
        .swiper-pagination.swiper-pagination-c4
        .swiper-wrapper
          - for (var i = 1; i < 11; i++)
            .swiper-slide Slide #{i}

      .content-block-title Vertical, 10px Between
      .swiper-container.swiper-init.ks-carousel-slider(data-pagination=".swiper-pagination-c5", data-space-between="10", data-direction="vertical")
        .swiper-pagination.swiper-pagination-c5
        .swiper-wrapper
          - for (var i = 1; i < 6; i++)
            .swiper-slide Slide #{i}

      .content-block-title Slow speed
      .swiper-container.swiper-init.ks-carousel-slider(data-speed="900", data-pagination=".swiper-pagination-c6", data-space-between="50")
        .swiper-pagination.swiper-pagination-c6
        .swiper-wrapper
          - for (var i = 1; i < 11; i++)
            .swiper-slide Slide #{i}